<template>
<div>
  <div class="mess">
    提示信息：您可以在此页面选择相应服务进行缴费，下单完成后，按照在线订单的预约时间，我们的律师将会与您通过电话联系进行一对一的咨询服务！！！
    </div>
    <div class="mess"> 
      购买流程：点击“购买服务”按钮-->选择日期-->选择时间(时间不可选时说明律师该天无空闲时间，需重新选择时间)-->填写信息-->支付
  </div>
  <!-- item属性值 key键名 index下标  -->
  <div class="box-bd">
    <ul class="clearfix">
      <li v-for="(item, key) of obj" :key="key">
        <h4>{{ item.lawyerName }}</h4>
        <img :src="item.lawyerPicture" :title="item.lawyerName" />
        <br/><a style="display:block;margin:10px;color: #5b3722">擅长：{{ item.lawyerIntroduce }}</a><br/>
        <br/><button name="购买" @click="go(item)"
        style="position: absolute;
  left: 140px;
  bottom: 8px;
  background: rgba(0, 0, 0, 0) linear-gradient(to right, rgb(235, 224, 213),  rgb(210, 53, 53)) repeat scroll 0% 0%;
  border: medium double rgb(173, 167, 154);">购买服务</button><br/>
      </li>
    </ul>
    <div>
      <order-detail v-if="orderDetailVisible" ref="orderDetail" />
    </div>
  </div>

</div>
</template>
<script>
import orderDetail from "./order-detail.vue";
import { listCustomerLawyer } from "@/api/business/customerlawyer"
export default {
  components: { orderDetail },
  data() {
    return {
      orderDetailVisible: false,
      obj: [],
    };
  },
  created(){
    this.getLawyerList();
  },
  methods: {
    //下单按钮
    go(row) {
      this.orderDetailVisible = true;
      this.$nextTick(() => {
        this.$refs.orderDetail.init(row);
      });
    },
    //获取律师信息
    getLawyerList(){
      listCustomerLawyer().then((response)=>{
        console.log("返回的律师信息")
        console.log(response)
        this.obj = response.rows;
        console.log(this.obj)
      })
    }
  },
};
</script>
<style>
.clearfix {
  *zoom: 1;
}
.box-bd ul {
  width: 1225px;
}
.box-bd ul li {
  float: left;
  width: 228px;
  height: 330px;
  background-color: #faf6f3;
  margin-right: 15px;
  margin-bottom: 15px;
  position: relative;
  list-style: none;
  /* border-style: groove;
  color: #d8cccc; */
  border-radius: 5%;
}
/* button {
  position: absolute;
  left: 160px;
  bottom: 10px;
  background: linear-gradient(to right, #ebe0d5, #ee6f08);
  border: medium double rgb(219, 157, 24);
} */
.box-bd ul li img {
  width: 150px;
  display: inline-block;
  margin: 0px 10px 10px 40px;
  height: 150px;
  border-radius: 50%;
}
.box-bd ul li h4 {
  margin: 10px 10px 10px 20px;
  font-size: 18px;
  color: #c56969;
  font-weight: 700;
  text-align: left;
}
.mess{
margin: 20px ;
text-align: center;
font-weight: 700;
color: #987575;
}
</style>